<template>
    <view class="commonLayout">
        <view class="jine">已提现金额：{{(pageData.withdrawalHistory / 100).toFixed(2)}} 元</view>
        <view class="jine">可提现金额：{{(pageData.canWithdrawal / 100).toFixed(2)}} 元</view>
        <view class="tixian">
            <input class="input" type="number" placeholder="请输入提现金额" v-model="amount">
        </view>
        <button type="primary" class="btn" @click="getMoney">发起提款</button>
        <view class="course_list"  v-if="List.length>0">
            <text style="font-weight: 700;">提现列表</text>
            <uni-list class="uniList">
                <uni-list-item 
                    v-for="item in List" 
                    :key="item.orderId" 
                    :title="item.userName" 
                    showArrow
                    clickable 
                    @click="gowithdrawal(item.orderId)"
                ></uni-list-item>
            </uni-list>
        </view>
    </view>
</template>

<script setup>
    import api from '@/utils/api.js';
    import { reactive, ref } from 'vue';
    import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
    let pageData = reactive({});
    let amount = ref(null);
    let List = reactive([]);

    const getDetail = async () => {
        const res = await api.commissionDetail();
        pageData = Object.assign(pageData, res.data);
    }
    const getWithdrawOrderList = async () => {
        const res = await api.withdrawOrderList({curPage:1, pageSize:20});
        List.push(...res.data.itemLst);
    }
    const getMoney = async () => {
        const res = await api.withdrawOrderAdd({amount: amount.value * 100});
        uni.showToast({
            title: res.msg,
            icon: 'success'
        })
    }
    const gowithdrawal = (orderId) => {
        uni.navigateTo({
            url: `/pages/withdrawalDetail/withdrawalDetail?orderId=${orderId}`
        })
    }
    onLoad(() => {
        getDetail();
        getWithdrawOrderList();
    })

    // 分享给朋友
    onShareAppMessage(() => {
        return {
            title: '教员收益 - 飞手之家',
            path: '/pages/commission/commission',
            imageUrl: '/static/images/head.jpg'
        };
    });

    // 分享到朋友圈
    onShareTimeline(() => {
        return {
            title: '教员收益 - 飞手之家',
            query: '',
            imageUrl: '/static/images/head.jpg'
        };
    });
</script>

<style lang="scss">
    .commonLayout {
        padding-top: 12px;
    }
    .jine {
        margin-top: 12px;
        font-size: 20px;
    }
    .tixian {
        margin: 20px 0;
    }
    .input {
        width: 300px;
        height: 100rpx;
        border: 1px solid #ccc;
        border-radius: 10rpx;
        padding-left: 12px;
    }
    .btn {
        margin: 20px 0;
        width: 312px;
    }
    .uniList {
        padding-top: 12px;
    }
</style>